import React, { useState } from 'react';
import { Card, Button, Spin, Form, Col, Row, Select, message } from 'antd';
import {
    BulbOutlined, SunOutlined, CheckCircleOutlined, CloseCircleOutlined
    , FileDoneOutlined
} from '@ant-design/icons';

import './index.scss';
function Test(props) {
    const [form] = Form.useForm();
    const [options1] = useState([
        {
            value: 'A1',
            label: 'A1',
        },
        {
            value: 'A2',
            label: 'A2',
        },
        {
            value: 'A3',
            label: 'A3',
        },
        {
            value: 'A4',
            label: 'A4',
        },
        {
            value: 'A5',
            label: 'A5',
        }
    ]);
    const [options2] = useState([
        {
            value: 'red',
            label: '🔴 红色',
        },
        {
            value: 'green',
            label: '🟢 绿色',
        },
        {
            value: 'blue',
            label: '🔵 蓝色',
        },
        {
            value: 'yellow',
            label: '🟡 黄色',
        }
    ]);
    const [loading, setLoading] = useState(false);
    const [result, setResult] = useState([]);
    function onFinish() {
        message.success("开灯")
    }
    function close() {
        message.success("关灯")
    }
    function onTest() {
        setLoading(true);
        setResult([
            {
                info: 'Red indicator - Passed',
                txt: 'Address A1 Test',
                status: 'success',
            },
            {
                info: 'Green indicator - Passed',
                txt: 'Address A2 Test',
                status: 'success',
            },
            {
                info: 'Blue indicator - Passed',
                txt: 'Address A3 Test',
                status: 'error',
            }
        ])
        setTimeout(() => {
            setLoading(false);
        }, 3000);
    }
    return (
        <div className="test-container">
            <div className="row-a1">
                <div className="left">
                    <div className="con-a1">
                        <Card title={
                            <div className='title'>
                                <BulbOutlined style={{ color: '#08c' }} />
                                <span className="tit">指示灯测试</span>
                            </div>
                        }>
                            <Form
                                form={form}
                                name="form"
                                initialValues={{
                                    address: 'A1',
                                    color: 'red',
                                }}
                                labelCol={
                                    {
                                        span: 6,
                                    }
                                }
                                onFinish={onFinish}
                            >
                                <Row>
                                    <Col span={12}>
                                        <Form.Item
                                            label="地址选择"
                                            name="address"
                                        >
                                            <Select
                                                options={options1}
                                            />
                                        </Form.Item>
                                    </Col>
                                    <Col span={12}>
                                        <Form.Item
                                            label="颜色选择"
                                            name="color"
                                        >
                                            <Select
                                                options={options2}
                                            />
                                        </Form.Item>
                                    </Col>
                                    <Form.Item>
                                        <Button className='submit-btn' icon={<SunOutlined />} type="primary" htmlType="submit">
                                            开灯
                                        </Button>
                                        <Button className='close-btn' onClick={close} type="primary">
                                            关闭
                                        </Button>
                                    </Form.Item>
                                </Row>
                            </Form>
                        </Card>
                    </div>
                    <div className="con-a2">
                        <Card title={
                            <div className='title'>
                                <CheckCircleOutlined style={{ color: '#08c' }} />
                                <span className="tit">批量测试</span>
                            </div>
                        }>
                            <div className="test-btn" onClick={onTest}>
                                <FileDoneOutlined />
                                <span>
                                    运行全面测试
                                </span>
                            </div>
                            <div className='result' style={{ display: loading ? 'flex' : 'none' }}>
                                <Spin />
                            </div>
                        </Card>
                    </div>
                </div>
                <div className="right">
                    <div className="con-a3">
                        <Card title={
                            <div className='title'>
                                <CheckCircleOutlined style={{ color: '#08c' }} />
                                <span className="tit">测试结果</span>
                            </div>
                        }>
                            <div className="empty" style={{ display: result.length <= 0 ? 'flex' : 'none' }}>
                                <div className="icon">
                                    <FileDoneOutlined style={{ fontSize: '30px', color: '#999999' }} />
                                </div>
                                <div className="tit">
                                    暂无测试记录
                                </div>
                                <div className="txt">
                                    执行测试后将在此显示结果
                                </div>
                            </div>
                            <div className="list" style={{ display: result.length > 0 ? 'block' : 'none' }}>
                                {result.map((item, index) => (
                                    <div key={index} className={"li " + item.status}>
                                        <div className="info">
                                            <div className="tit">{item.txt}</div>
                                            <div className="txt">{item.info}</div>
                                        </div>
                                        <div className="icon">
                                            {
                                                item.status === 'success' ? (
                                                    <CheckCircleOutlined style={{ fontSize: '20px', color: '#27ae60' }} />
                                                ) : (
                                                    <CloseCircleOutlined style={{ fontSize: '20px', color: '#f5222d' }} />
                                                )
                                            }
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </Card>
                    </div>
                    <div className="con-a4">
                        <Card title={
                            <div className='title'>
                                <span className="tit">系统状态</span>
                            </div>
                        }>
                            <div className="con">
                                <div className="icon">
                                    <CheckCircleOutlined style={{ fontSize: '14px', color: '#27ae60' }} />
                                </div>
                                <div className="info">
                                    <div className="tit">串口状态:</div>
                                    <div className="txt">连接正常</div>
                                </div>
                            </div>
                        </Card>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Test;